<template>
    <!-- dialog窗口，用来添加和编辑弹窗 -->
    <el-dialog :title="dialogTitle" @close="HIDE_DIALOG" :visible="dialogVisible">
        <el-form :model="stuForm" :rules="stuRules" ref="addStuRuleForm">
            <el-form-item label="头像">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false" :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="stuForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目地址" prop="productUrl">
                <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级" prop="class">
                <el-input v-model="stuForm.class" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="stuForm.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
                <el-input v-model="stuForm.city" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="degree">
                <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="stuForm.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="HIDE_DIALOG">取 消</el-button>
            <el-button type="primary" @click="confirmClick('addStuRuleForm')">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex"
//引入发起请求的api
import * as api from "../../api/users"
export default {
    data() {
        return {
            // dialogInfo: {
            //     title: "增加学员信息",
            //     action: "add",    //操作是增加还是编辑
            //     editSuccessMsg: "增加成功",
            //     editerrorMsg: "增加失败",
            // },
            imageUrl: "",
            // form: "",
            showAvator: true,
            stuRules: {
                name: [
                    { required: true, message: "请输入名字", trigger: "blur" }
                ],
                class: [
                    { required: true, message: "请输入班级", trigger: "blur" }
                ],
                degree: [
                    { required: true, message: "请输入学历", trigger: "blur" }
                ],
                city: [
                    { required: true, message: "请输入城市", trigger: "blur" }
                ],
                productUrl: [
                    { required: true, message: "请输入项目地址", trigger: "blur" }
                ],
                age: [
                    { required: true, message: "请输入年龄", trigger: "blur" }
                ],
                description: [
                    { required: true, message: "请输入描述", trigger: "blur" }
                ]
            },
            stuForm: {
                name: "",
                productUrl: "",
                headimgurl: "",
                class: "",
                age: "",
                city: "",
                degree: "",
                description: ""
            },
            oldForm: {}
        }
    },
    computed: {
        ...mapState(['dialogVisible', 'dialogTitle'])
    },
    methods: {
        ...mapMutations(['SHOW_DIALOG', 'HIDE_DIALOG', 'CHANGE_DIALOG_TITLE']),
        ...mapActions(['GET_STULIST']),
        dialogClose() {
            this.HIDE_DIALOG()
        },
        //增加学员信息
        confirmClick(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //关闭dialog
                    this.HIDE_DIALOG()
                    //表单校验成功
                    //发送请求  问题：如何知道点击确定的时候，此时的请求是增加接口还是编辑接口？
                    //判断dialogTitle
                    if (this.dialogTitle === '增加学员信息') {
                        //增加信息
                        console.log(this.stuForm);  //这个就是表单中收集到的用户数据
                        api.addStuApi(this.stuForm)
                            .then(res => {
                                console.log(res);
                                if (res.data.state) {
                                    //增加成功，关闭dialog弹出框
                                    //重新发起请求，更新列表
                                    this.GET_STULIST()
                                    this.$message.success('添加成功')
                                } else {
                                    //增加失败
                                    this.$message.error('增加失败')
                                }
                            })
                    } else {
                        //编辑请求
                        api.updateStuApi(this.stuForm)
                            .then(res => {
                                console.log(res);
                                if (res.data.state) {
                                    //更新成功
                                    this.GET_STULIST()
                                    this.$message.success('修改成功')
                                } else {
                                    //更新失败，比如你在更新的时候，数据被别人删除
                                    this.$message.error("更新失败，没有做任何修改，或者数据不存在")
                                    //更新页面数据
                                    this.GET_STULIST()
                                }
                            })
                    }

                } else {
                    this.$message.error('请将内容填写完整')
                }
            })
        },
        handleAvatarSuccess(imgurl) {
            this.headimgurl = imgurl
        }
    }
}

</script>